import React, { FC, useState } from "react";
import ListSearch from "../../../components/ListSearch";
import style from "../common.module.scss";
import {
  Table,
  Tag,
  Space,
  Button,
  Modal,
  Typography,
  Empty,
  message,
  Spin,
} from "antd";
import useLoadQuestionListData from "../../../hooks/useLoadQuestionListData";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import ListPage from "../../../components/ListPage";
import { useRequest } from "ahooks";
import {
  updateQuestionService,
  deleteQuestionsService,
} from "../../../services/question";
const { Title } = Typography;
// const rowQuestionList = [
//   {
//     _id: 1,
//     title: "问卷1",
//     isPublished: false,
//     isStar: true,
//     answerCount: 2,
//     createAt: "2025-01-19",
//   },
//   {
//     _id: 2,
//     title: "问卷2",
//     isPublished: false,
//     isStar: true,
//     answerCount: 2,
//     createAt: "2025-01-19",
//   },
//   {
//     _id: 3,
//     title: "问卷3",
//     isPublished: true,
//     isStar: true,
//     answerCount: 3,
//     createAt: "2025-01-19",
//   },
// ];
const Trash: FC = () => {
  const { confirm } = Modal;
  // const [questionList,setQuestionList] = useState(rowQuestionList)
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const tableColumns = [
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "是否发布",
      dataIndex: "isPublished",
      render: (isPublished: boolean) => {
        return isPublished ? (
          <Tag color="processing">已发布</Tag>
        ) : (
          <Tag>未发布</Tag>
        );
      },
    },
    {
      title: "答卷",
      dataIndex: "answerCount",
    },
    {
      title: "创建时间",
      dataIndex: "createAt",
    },
  ];
  const {
    data = {},
    error,
    refresh,
    loading,
  } = useLoadQuestionListData({ isDeleted: true });
  const { list = [], total = 0 } = data;

  //恢复
  const { run: recover } = useRequest(
    async () => {
      // for await (const id of selectedIds){
      //   await updateQuestionService(id,{isDeleted:false})
      // }
      //两个写法都可以
      await Promise.all(
        selectedIds.map((id) => updateQuestionService(id, { isDeleted: false }))
      );
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess() {
        message.success("恢复成功");
        setSelectedIds([]);
        refresh();
      },
    }
  );

  //删除
  const { run: deleteQuestions } = useRequest(
    async () => {
      await deleteQuestionsService(selectedIds);
    },
    {
      manual: true,
      onSuccess() {
        message.success("删除成功");
        setSelectedIds([]);
        refresh();
      },
    }
  );

  const tableEelment = (
    <>
      <div style={{ marginBottom: "16px" }}>
        <Space>
          <Button
            type="primary"
            disabled={selectedIds.length === 0}
            onClick={recover}
          >
            恢复
          </Button>
          <Button
            danger
            onClick={() => {
              confirm({
                title: "是否要彻底删除？",
                okText: "确定",
                cancelText: "取消",
                icon: <ExclamationCircleOutlined />,
                onOk() {
                  deleteQuestions();
                },
              });
            }}
          >
            彻底删除
          </Button>
        </Space>
      </div>
      <Table
        dataSource={list}
        columns={tableColumns}
        pagination={false}
        rowKey={(q: any) => q._id}
        rowSelection={{
          type: "checkbox",
          onChange: (selectedRowKeys) => {
            // console.log(selectedRowKeys)
            setSelectedIds(selectedRowKeys as number[]);
          },
        }}
      />
    </>
  );
  return (
    <>
      <div className={style.header}>
        <div className={style.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={style.right}>
          <ListSearch />
        </div>
      </div>
      <div className={style.content}>
        {loading && (
          <div style={{ textAlign: "center" }}>
            <Spin></Spin>
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据   " />}
        {list.length > 0 && tableEelment}
      </div>

      <div className={style.footer}>
        {" "}
        <ListPage total={total}></ListPage>
      </div>
    </>
  );
};
export default Trash;
